<template>
  <div class="system-menu">
    <div class="table-container">
      <table-header
        v-model:columns="columns"
        :buttons="['refresh', 'add', 'quickSearch', 'colSetting']"
        role-prefix="system:menu"
        table-id="systemMenu"
        @refresh="getAllMenuList"
        @create="handleCreate"
        @change="handleInputChange"
      />
      <table-base :table-data="menuList" :columns="columns" :loading="loading">
        <template #menu-type="scope">
          <el-tag v-if="scope.row.menuType === menuTypeEnum.DIRECTORY" type="danger">目录</el-tag>
          <el-tag v-else-if="scope.row.menuType === menuTypeEnum.MENU" type="success">菜单</el-tag>
          <el-tag v-else-if="scope.row.menuType === menuTypeEnum.BUTTON" type="info">按钮</el-tag>
        </template>
        <template #option="scope">
          <el-button
            v-btn-permission="'system:menu:edit'"
            type="primary"
            text
            class="btn-text btn-text-primary"
            @click="handleEdit(scope.row.id)"
          >
            编辑
          </el-button>
          <el-button
            v-btn-permission="'system:menu:delete'"
            type="danger"
            text
            class="btn-text btn-text-danger"
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </table-base>
    </div>
    <menu-modal ref="menuModalRef" :menu-list="menuList" @create="handleCreateMenu" @edit="handleEditMenu" />
    <modal-delete ref="modalDeleteRef" @confirm="handleConfirmDelete" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue"
import { showErrorToast, showSuccessToast } from "@/utils/toast"
import { getAllMenu, menuCreate, menuDelete, menuEdit } from "@/api/menu"
import TableHeader from "@/components/base/TableHeader.vue"
import TableBase from "@/components/base/TableBase.vue"
import ModalDelete from "@/components/base/ModalDelete.vue"
import MenuModal from "./components/MenuModal.vue"
import { columns } from "./config/content.config"
import { menuTypeEnum } from "@/enums/menu"

const menuModalRef = ref<InstanceType<typeof MenuModal> | null>(null)
const modalDeleteRef = ref<InstanceType<typeof ModalDelete> | null>(null)

const loading = ref(false)
// 菜单列表
const menuList = ref<MenuTreeResponse[]>([])
const searchParams = reactive({
  menuName: ""
})

onMounted(() => {
  getAllMenuList()
})

const handleCreate = () => {
  menuModalRef.value?.openModal(false)
}

const handleEdit = (id: number) => {
  menuModalRef.value?.openModal(true, id)
}

/**
 * 新增菜单
 */
const handleCreateMenu = async (params: MenuCreateRequest) => {
  try {
    const res = await menuCreate(params)
    if (res.data) {
      showSuccessToast("新增菜单成功")
      getAllMenuList()
      menuModalRef.value?.closeModal()
    }
  } catch (error: any) {
    showErrorToast(error.message)
  }
}

/**
 * 编辑菜单
 */
const handleEditMenu = async (params: MenuEditRequest) => {
  try {
    const res = await menuEdit(params)
    if (res.data) {
      showSuccessToast("编辑菜单成功")
      getAllMenuList()
      menuModalRef.value?.closeModal()
    }
  } catch (error: any) {
    showErrorToast(error.message)
  }
}

/**
 * 删除菜单
 *
 * @param id 菜单 id
 */
const handleDelete = (id: number) => {
  if (!id) return
  modalDeleteRef.value?.openModal(id)
}

const handleConfirmDelete = async (ids: number[]) => {
  if (ids.length <= 0) return

  try {
    const res = await menuDelete({
      id: ids[0]
    })
    if (res.data) {
      getAllMenuList()
      showSuccessToast("删除成功")
      modalDeleteRef.value?.closeModal()
    }
  } catch (error: any) {
    showErrorToast(error.message)
  }
}

const doSearch = () => {
  getAllMenuList()
}

const handleInputChange = (key: string) => {
  searchParams.menuName = key
  doSearch()
}

/**
 * 获取所有菜单列表
 */
async function getAllMenuList() {
  try {
    loading.value = true
    const res = await getAllMenu(searchParams)
    if (res.data) {
      menuList.value = res.data ?? []
    }
  } catch (error: any) {
    showErrorToast(error.message)
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped></style>
